<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
		<meta charset="utf-8" />
		<title>E,Loop....</title>
		<script type="text/javascript" src="../../jquery-1.7.js"></script>
		<style type="text/css">
		*{
			margin:0;padding:0;
			font-family: Arial, Helvetica, sans-serif;
		}
		html,body{height:100%;width:100%;}
		canvas{display:block;border:1px double #ccc;margin:20px auto;}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="700" height="500"></canvas>
		<hr/>
		<center>
			<input type="button" id="startButton" value="star" />
			<input type="button" id="stopButton" value="stop" />
		</center>
		<script type="text/javascript">
		var canvas = $("#myCanvas");
		var context = canvas.get(0).getContext("2d");
		
		var canvasWidth = canvas.width();
		var canvasHeight = canvas.height();
		
		var playAnimation = true;
		
		var startButton = $("#startButton");
		var stopButton = $("#stopButton");
		
		startButton.hide();
		startButton.click(function(){
			$(this).hide();
			stopButton.show();
			playAnimation = true;
			animate();
		})
		stopButton.click(function(){
			$(this).hide();
			startButton.show();
			playAnimation = false;
		});
		
		var Shape = function(x,y,width,height){
			this.x = x;
			this.y = y;
			this.width = width;
			this.height = height;
			this.radius = Math.random() * 50;
			this.angle = 0;
			this.reverseX = false;
			this.reverseY = false;
		}
		
		var shapes = new Array();
		
		for(var i=0;i<30;i++){
			var x = Math.random() * 250;
			var y = Math.random() * 250;
			var width = height = Math.random() * 30;
			shapes.push(new Shape(x,y,width,height));
		}
		var _num_ = 2;
		function getNumber(){
			window.setInterval(function(){
				var temp = 1;
				if(_num_>100){
					temp = -1;
				}else{
					temp = 1;
				}
				_num_ += temp;
			},1000)
		}
		
		function animate(){
			context.clearRect(0,0,canvasWidth,canvasHeight);
			var shapesLength = shapes.length;
			for(var i=0;i<shapesLength;i++){
				var tempShape = shapes[i];
				if(!tempShape.reverseX){
					tempShape.x += _num_;
				}else{
					tempShape.x -= _num_;
				}
				if(!tempShape.reverseY){
					tempShape.y += _num_;
				}else{
					tempShape.y -= _num_;
				}
				context.fillRect(tempShape.x,tempShape.y,tempShape.width,tempShape.height);
				if(tempShape.x < 0){
					tempShape.reverseX = false;
				}else if(tempShape.x + tempShape.width > canvasWidth){
					tempShape.reverseX = true;
				};
				if(tempShape.y < 0){
					tempShape.reverseY = false;
				}else if(tempShape.y + tempShape.height > canvasHeight){
					tempShape.reverseY = true;
				};
			};
			if(playAnimation){
				setTimeout(animate,33);
			}
		}
		getNumber();
		animate();
		</script>
		
	</body>
</html>
